<template>
  <el-select v-model="deviceState" clearable filterable style="width: 350px;" @change="handleChange">
    <el-option
      v-for="state in deviceStateList"
      :key="state.value"
      :value="state.value"
      :label="state.label"
    />
  </el-select>
</template>

<script>
// import { apiFindAllProducts } from '../api'

export default {
  name: 'SelectDeviceState',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: String, require: false, default: '' }
  },
  data() {
    return {
      deviceState: '',
      deviceStateList: []
    }
  },
  watch: {
    value() {
      this.deviceState = this.value
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.deviceStateList = [
        {
          value: 'ENABLE',
          label: '启用'
        },
        {
          value: 'DISABLE',
          label: '禁用'
        }
      ]
    },
    handleReset() {
      this.deviceState = ''
      this.handleChange(this.deviceState)
    },
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped></style>
